<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <style>
        body{
            position: relative;
        }
        main{
            position: relative;
            top: 300px;
            margin: 0 auto;
            width: 400px;
            height: 300px;
            display: flex;
            flex-direction: column;
            /*background-color: silver;*/
            border: 1px solid thistle;
            border-radius: 5px;
            justify-content: space-around;
        }
        

        div{
            display: flex;
        }

        #title{
            font-size: 22px;
            color: #5C3317;
        }

        #register{
            font-size: 14px;
        }

        p{
            margin: auto auto;
        }

        div:nth-child(1){
            height: 60px;
            justify-content:space-around;
        }
        
        div:nth-child(2){
            flex-direction: column;
            width: 300px;
            height: 100px;
            /*background-color: red;*/
            margin: 0 auto;
            justify-content: space-around;
        }

        div:nth-child(3){
            justify-content: space-around;
            align-items: baseline; 
        }

        div:nth-child(4){
            height: 60px;
            /*background-color: red;*/
            justify-content: center;
            align-items: center;
        }
        .user{
            width: 294px;
            height: 30px;
        }

        #enter{
            /*margin: 0 auto;*/
            width: 294px;
            height: 40px;
            
        }
        span{
            margin: 0 auto;
            font-size: 14px;
            color: turquoise;
        }
        a{
            text-decoration: none;
            color: grey;
        }

        

        


    </style>
</head>

<body>
    <main>
        <div>
            <p id="title">登录</p>
            <p id="register">
                <a href="#">注册</a>
            </p>

        </div>
        <div>
            <input class="user" type="text" name="username" value="" placeholder="请输入用户名" autocomplete="off" required>
            <input class="user" type="password" name="password" value="" placeholder="请输入密码" autocomplete="off" required>
        </div>
        <div>
            <p>
                <input type="checkbox" name="remember">记住我
            </p>

            <p><a href="#">忘记密码?</a></p>
        </div>
        <div>
            <input id="enter" type="button" onclick="click1()" value="登录">
</div>
<div>
    <span>------其他登录方式------</span>
</div>

</main>
</body>

</html>